(function ($) {
    'use strict';
    let loadImage = function (url, imgLoaded, imgFailed) {
        let image = new Image();
        image.onerror = function () {
            if (typeof imgFailed === 'function') imgFailed(url);//图片加载发生异常
        }
        image.onload = function () {
            if (typeof imgLoaded === 'function') imgLoaded(url);//图片加载成功
        };
        // setTimeout(function() {
        image.src = url;
        // }, 1000);
    }
//暴露接口 dropdown
    $.fn.extend({
        /**
         *  { $container: 模块容器 , totalItemNum: 模块的子项总数 ,triggerEvent: 触发的事件 ,id: 模块id标识 }
         * 以轮播图为例 { $container:$focusSlider, totalItemNum:$focusSlider.find('.slider-img').length,triggerEvent:'slider-show',id: 'focus'}
         * 1) 为$container元素绑定 slider-show 事件; 对应函数: loadItemFn()
         *      loadItemFn(e, index, elem)  index:当前激活的索引  elem:当前激活的元素
         *          如果当前index还没有加载过;
         *          触发 focus-loadItem(e, index, elem, success)函数
         *          success = function () {
         *                items[index] = 'loaded';
         *                loadedItemNum++;
         *                //如果已经全部加载,触发 focus-itemsLoaded()事件
         *                if (loadedItemNum === options.totalItemNum) $elem.trigger(id + '-itemsLoaded');
         *          }
         * 2) 为$container元素绑定 focus-itemsLoaded 事件 (表示数据已经全部加载完毕)
         *        移除$container 的 slider-show 事件
         */
        loadUntil: function (options) {
            let items = {},
                loadedItemNum = 0,
                $elem = options.$container, // 轮播图父元素
                id = options.id,  // focus
                loadItemFn = function (e, index, elem) {
                    // index:当前索引  elem:索引对应的元素
                    if (items[index] === 'loaded') return;//标识第index 是否已经加载过
                    $elem.trigger(id + '-loadItem', [index, elem, function () {
                            items[index] = 'loaded';
                            loadedItemNum++;
                            if (loadedItemNum === options.totalItemNum) $elem.trigger(id + '-itemsLoaded');
                        }
                        ]
                    );
                }
            $elem.on(options.triggerEvent, loadItemFn);       // 绑定 slider-show 事件(什么时候开始加载)
            $elem.on(id + '-itemsLoaded', function () { // 绑定 focus-itemsLoaded 事件(加载完毕)
                $elem.off(options.triggerEvent, loadItemFn);  // 清除 slider-show 事件
            });
        },
        //图片的延迟加载
        loadImages: function ($images, success, fail) {
            $images.each(function (_, el) { // _ 相当占位，不使用该参数。
                let $image = $(el), url = $image.data('src');
                loadImage(
                    url,
                    function (url) {
                        $image.attr('src', url);
                        success();
                    },
                    function (url) {
                        console.log('从' + url + '加载图片失败');
                        fail(); // 多加载一次 显示备用图片 image/floor/placeholder.png
                    }
                );
            });
        }
    });
})(jQuery);
